<template>
	<view class="store-info-wrapper">
		<view class="linear-gradient">
			<uni-nav-bar :fixed="true" :background-color="bjColor" status-bar left-icon="left" color="#000"
			title="门店主页" @clickLeft="back" :border="false" />
			<view class="store-banner">
				<swiper indicator-dots circular autoplay indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff"  class="swiper-box"   
				style="height: 400rpx;border-radius: 10rpx;overflow: hidden;">
					<swiper-item v-for="(item ,index) in storeBanner" :key="index" >
						<view class="swiper-item" style="height: 400rpx;border-radius: 10rpx;overflow: hidden;">
							<image :src="item" style="width: 702rpx; height: 400rpx; border-radius: 10rpx;" mode="aspectFill" @click="previewImage(index)"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="store-infomation-wrapper conteainer-public-style">
			<view class="store-name">
				<view class="">{{ storeInfo.storeName }}</view>
				<view class="gray-color fz24">{{storeInfo.description}}</view>
				
			</view>
			<view class="store-info-item b-b-1 flex-c-s">
				<view class="">
					<text style="margin-right: 20rpx;">{{ storeInfo.status_value }}</text> <text>{{ storeInfo.openingTime }}~{{ storeInfo.closingTime }}</text>
				</view>
				<view class="flex-c" @click="storeInfoHandle">
					<!-- 西安 高新区 1.3km -->
					<text class="fz22 color666">门店详情</text>
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
			<view class="store-info-item b-b-1 flex-c-s">
				<view class=""  style="width:560rpx;">
					<view class="" style="margin-bottom:10rpx">
						{{ storeInfo.address }}
					</view>
					
				</view>
				<view class="flex-c-col" @click="gotoMap(storeInfo)">
					<image style="width: 32rpx; height: 32rpx;" src="/static/images/map-pin2@2x.png" mode=""></image>
					<view style="margin-top: 4rpx;">导航</view>
				</view>
			</view>
			<view class="store-info-item flex-c-s">
				<view class="">
					<view class="" style="margin-bottom:10rpx">
						联系方式
					</view>
					<view class="gray-color">
						{{ storeInfo.phone }}
					</view>
				</view>
				<view class="flex-c">
					<view class="flex-c-col" style="margin-right: 72rpx;" @click="kefu">
						<image style="width: 32rpx; height: 32rpx;" src="/static/images/kefu@2x.png" mode=""></image>
						<view style="margin-top: 4rpx;">客服</view>
					</view>
					<view class="flex-c-col" @click="callHandle">
						<image style="width: 32rpx; height: 32rpx;" src="/static/images/dianhua.png" mode=""></image>
						<view style="margin-top: 4rpx;">电话</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <Tabs /> -->
		<view class="store-goods-list mb24  flex-c-s">
			<view class="" v-for="g of storeGoods" :key="g.id">
				<GoodsItem :goodsInfo="g" @goodsClick="goodsClick" />
			</view>
		</view>
		
		<NoData v-show="!storeGoods.length" msg="该门店暂无商品" />
		
		<u-loadmore v-show="storeGoods.length" :status="statusText" marginTop="20" :loading-text="loadingText"
		        :loadmore-text="loadmoreText"  :nomore-text="nomoreText" line />
	</view>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
import { onPageScroll, onLoad } from '@dcloudio/uni-app'
import { getStoreInfo } from '@/http/api'
import { getStoreProductList } from '@/http/home'

import NoData from '@/components/NoData.vue'
import GoodsItem from '@/components/GoodsItem.vue'
import Tabs from '@/components/Tabs.vue'

import type { IHomeStore, IStoreGoods } from '@/types'

var qiyuModule = uni.requireNativePlugin("Netease-QiyuModule")
export default defineComponent({
	components:{
		GoodsItem, Tabs, NoData
	},
	setup() {
		const bjColor = ref('rgba(255,255,255,0)')
		const state = reactive({
			storeInfo: {} as IHomeStore,
			storeGoods: [] as Array<IStoreGoods>,
			total: 0,
			page: 1,
			pageSize: 10,
			storeBanner: [] as Array<string>,
			storeId: 0,
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '没有更多了',
		})
		onPageScroll((e) => {
			if(e.scrollTop > 20) {
				bjColor.value = 'rgba(255,255,255,1)'
			} else {
				bjColor.value = 'rgba(255,255,255,0)'
			} 
			
			if(state.total === 0) return;
			if(state.total === state.storeGoods.length) return;
			state.page ++
			getStoregoods() 
		})
		onLoad((e) => {
			state.storeId = e!.id
			getStoreInfoData()
			getStoregoods()
			
		})
		
		const statusText = computed(() => {
			return state.total === state.storeGoods.length ? 'nomore' : 'loadmore'
		})
		
		const back = () => {
			uni.navigateBack()
		}
		
		const getStoreInfoData = async () => {
			let res = await getStoreInfo(state.storeId) 
			if(res.code === 0) {
				state.storeInfo = res.data
				state.storeBanner = res.data?.detailImage || []
			}
		}
		const getStoregoods = async () => {
			uni.showLoading({ title: '加载中'})
			let res = await getStoreProductList({
				pageSize: state.pageSize,
				page: state.page,
				storeId: state.storeId
			})
			console.log(res);
			if(res.code === 0) {
				state.storeGoods = [...state.storeGoods,...res.data?.list || []]
				state.total = res.data?.total || 0
			}
			uni.hideLoading()
		}
		
		const goodsClick = (item: { id: number}) => {
			uni.navigateTo({
				url: `/pages/shopPackge/goodsInfo/goodsInfo?id=${item.id}`
			})
		}

		const gotoMap = (e: any) => {
			uni.openLocation({
				latitude: Number(e.latitude),//维度
				longitude: Number(e.longitude),//经度
				scale: 18,//缩放比例，范围5~18，默认为18
				name: '' ,//地址名称
				address: '',//地址详情
			})
			// uni.navigateTo({
			// 	url: `/pages/indexPackge/map/index?longitude=${e.longitude}&latitude=${e.latitude}`
			// })
		}
		const callHandle = () => { 
			uni.makePhoneCall({
				phoneNumber: state.storeInfo.phone
			});
		}
		const kefu = () => {
			qiyuModule.openServiceActivity({
				title: '客服会话',
				source: {
					title: 'xad-y89',
					ios_sendProduct: false,
				},
			})
		}
		
		const storeInfoHandle = () => {
			uni.navigateTo({
				url: `/pages/indexPackge/storeInfo/storeInfo?id=${state.storeId}`
			})
		}
		const previewImage = (index: number) => {
			uni.previewImage({
				urls: state.storeBanner,
				current: index
			})
		}
		return {
			callHandle,
			kefu,
			back,
			bjColor,
			goodsClick,
			gotoMap,
			statusText,
			storeInfoHandle,
			previewImage,
			...toRefs(state)
		}
	}
})

</script>

<style>page{ background: #f8f8fa; }</style>

<style lang="scss" scoped>
.store-info-wrapper{
	 padding-bottom: 20px;
	.store-banner{
		margin: 24rpx;
	}
	.store-infomation-wrapper{
		margin: 24rpx;
		.store-name{
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			line-height: 38rpx;
			margin-bottom: 32rpx;
		}
		.store-info-item{
			font-size: 22rpx;
			font-weight: 400;
			color: #333333;
			line-height: 26rpx;
			padding-bottom: 16rpx;
			margin-bottom: 16rpx;
		}
	}
	.store-goods-list{
		margin: 24rpx;
		flex-wrap: wrap;
	}
}
</style>